<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市联动</title>
	<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		var xdom=null;
		$(function(){
			showprovince();			
		})
		//显示省份
		function showprovince(){
			// ajax读取xml
			$.ajax({
				url: './ChinaArea.xml',
				type: 'GET',
				dataType: 'xml',
				success:function(data){
					//先列出省一级的内容
					xdom=data;
					var province=$(xdom).find("province");
					province.each(function(k,v){
						var a=$(v).attr("province");
						var val=$(v).attr("provinceID")
						$("#province").append('<option value="'+val+'">'+a+'</option');
					})
				}
			})			
		}
		//显示市
		function showcity(){
/*			根据选中的option value值找到对应的province节点
			然后根据province节点找到city节点的数据
			追加到城市下拉框中.*/
			var val=$("option:selected").attr("value");
			var provinced=$(xdom).find("province[provinceID="+val+"]");
			var cityd=provinced.find("City");
			$("#city").empty();
			$("#city").append('<option value="0">请选择</option>');
			cityd.each(function(k,v){
				$("#city").append("<option value='"+$(v).attr("CityID")+"'>"+$(v).attr("City")+"</option>");
			})
		}
		//显示区
		function showcountry(){
			var val=$("#city option:selected").attr("value");
			//根据val定位具体节点
			var cityd=$(xdom).find("City[CityID="+val+"]");
			var countryd=cityd.find("Piecearea");
			$("#country").empty();
			$("#country").append('<option value="0">请选择</option>');
			countryd.each(function(k, v) {
				$("#country").append("<option value='"+$(v).attr("PieceareaID")+"'>"+$(v).attr("Piecearea")+"</option>");
			});
			// console.log(countryd);
		}
	</script>
</head>
<body>
	<select name="province" id="province" onchange="showcity();"><option value="0">请选择</option></select>
	<select name="city" id="city" onchange="showcountry()"><option value="0">请选择</option></select>
	<select name="country" id="country" ><option value="0">请选择</option></select>
</body>
</html>